<template>
    <view>
		<!-- <view id="_drag_button" class="drag">
		  <image src="../../static/c3.png" mode="aspectFit" style="width: 100rpx;height: 100rpx;"></image>
		  <text style="color:#181818;">客服咨询</text>
		</view> -->
<!-- <cc-noticeBar :noticeList="noticeList" colors="orange" @click="itemClick"></cc-noticeBar> -->

		<view class="uni-bg-white" style="position:fixed;width:100%;z-index:999;">
			<!-- 使用scroll-view实现tabs滑动切换 -->
			<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
				<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
					<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
						<text class="menu-topic-text">{{item.name}}</text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="padding:40rpx 0;"></view>
		<view>
			<uni-notice-bar v-if="notice_content" scrollable single showIcon speed="20" :text="notice_content">{{notice_content}}</uni-notice-bar>
			<scroll-view scroll-y="true">
			<view v-show="!no_result">
				<uni-card :is-shadow="false" v-for="(it, index) in orderList" :key="it.orderId">
					<view class="uni-flex uni-row"
						style="padding:10rpx 0;border-bottom:2rpx solid #f5f5f5;justify-content:space-between;">
						<view class="uni-flex uni-row"
							style="justify-content:flex-start;">
							<view>
								<image style="width:40rpx;height:40rpx;"
									src="../../static/image/time.png"></image>
							</view>
							<view>
								<text>{{it.orderTime}}</text>
							</view>
						</view>
						<view style="color:#FF4D4F;font-size:12pt;" v-show="currentTab != 0">
							<text>{{it.statusName}}</text>
						</view>
					</view>
					<view class="uni-flex uni-row" style="padding:10rpx 0;border-bottom:2rpx solid #f5f5f5;">
						<view class="uni-flex uni-column" style="flex-grow:2;">
							<view class="uni-flex uni-row" style="padding:10rpx 0;">
								<view style="color:#181818;">
									<text>收件: </text>
								</view>
								<view style="padding-left:20rpx;color:#7B7B7B;" >
									<view>
										<text>{{it.toShopName}} {{it.toAddress}}</text>
									</view>
									<view>
										<text>
											 {{it.toLinkman}} {{it.toPhone}}
										</text>
									</view>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding:10rpx 0;" v-show="it.transWay == 1">
								<view  style="color:#181818;">
									<text>货物: </text>
								</view>
								<view style="padding-left:20rpx;color:#7B7B7B;">
									<text v-for="goods in it.goodsList">
										{{goods.name}}*{{goods.count}}
									</text>
								</view>
							</view>
							<view class="uni-flex uni-row" style="padding:10rpx 0;" v-show="it.transWay == 2">
								<view  style="color:#181818;">
									<text>包车</text>
								</view>
							</view>
						</view>
						<view style="display:flex;align-items:center;color:#181818;font-size:12pt;">
							<text style="font-size:9pt;">￥</text><text>{{it.payFee}}</text>
						</view>
					</view>
					<view class="uni-flex uni-row" style="justify-content:flex-end;padding-top:20rpx;">
						<view>
							<button class="mini-btn" size="mini" type="primary" style="color:#FF4D4F;border: 1px solid #FF4D4F;" plain="true" 
								@click="addOrderAgain(index)">再来一单</button>
						</view>
						<view style="padding-left:20rpx;" v-show="currentTab != 0 && (it.orderStatus == 30 || it.orderStatus == 40)">
							<button class="mini-btn" size="mini" type="primary" style="color:#FF4D4F;border: 1px solid #FF4D4F;" plain="true" 
								@click="cancelOrder(it.orderId)">取消订单</button>
						</view>
						<view style="padding-left:20rpx;" v-show="currentTab != 0 && it.orderStatus == 20">
							<button class="mini-btn" size="mini" type="primary" style="background-color:#FF4D4F;">立即支付</button>
						</view>
					</view>
				</uni-card>
			</view>
			<view v-show="no_result" class="uni-flex uni-column" 
				style="align-items:center;">
				<view style="margin:50rpx 0;">
					<text>暂无订单</text>
				</view>
				<view>
					<button @click="onClickToCreateOrder"
						style="background-color:#FF4D4F;color:#F8F8F8;font-size:28rpx;">去下单</button>
				</view>
				
			</view>
			</scroll-view>
		</view>
    </view>
</template>
<script>
	import { APP_NAME } from '@/util/constant.js';
	import { getOrderList } from '@/util/express_api.js';
	import { post, checkLogin, $get } from '@/util/request.js';
	
	export default {
		data() {
			return {
				tabs: [
					{
						id:1,
						name: '常发货源'
					}
					,{
						id:2,
						name: '待付款'
					}
					,{
						id:3,
						name: '服务中'
					}
					,{
						id:4,
						name: '已完成'
					}
				],
				currentTab: 0,
				
				no_result: false,
				orderList: [],
				notice_content: ''
			}
		},
		onLoad(options) {
			wx.showShareMenu({
			    withShareTicket:true,
			    // 设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			    menus:["shareAppMessage","shareTimeline"]
			});
			
			let tabIndex = 0;
			if (typeof options != 'undefined') {
				if (typeof options.tabIndex != 'undefined') {
					//this.currentTab = options.tabIndex;
					tabIndex = options.tabIndex;
				}
			}
			this.swichMenu(tabIndex);
			//this.getNotice();
		},
		// 转发给好友
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		    }
		    return {
		        title: APP_NAME //分享的名称
		    }
		},
		//分享到朋友圈
		onShareTimeline(res) {
		    return {
		        title: APP_NAME,
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			onClickToCreateOrder() {
				uni.switchTab({
					url: '/pages/shop/shop'
				});
			},
			swichMenu(index) {
				this.currentTab = index
				this.tabCurrent = 'tabNum'+ index
				if (index == 0) {
					this.loadOrderList({
						ifOften: 1
					});
				} else if (index == 1) {
					this.loadOrderList({
						orderStatusList: [20]
					});
				} else if (index == 2) {
					this.loadOrderList({
						orderStatusList: [30,40,45,50]
					});
				} else if (index == 3) {
					this.loadOrderList({
						orderStatusList: [90]
					});
				}
				this.getNotice();
			},
	        loadOrderList(param) {
				var that = this;
				var userInfo = uni.getStorageSync('userInfo');
				if (userInfo != null && userInfo != '') {
					param.userId = userInfo.userId;
					post('express/order/list', param).then(res => {
						that.orderList = res.data;
						
						if (that.orderList == null || that.orderList.length <= 0) {
							that.no_result = true;
						} else {
							that.no_result = false;
						}
					});
				} else {
					that.no_result = true;
				}
			},
			async addOrderAgain(index) {
				let res = await checkLogin();
				if (!res) {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				} else {
					uni.navigateTo({
						url: '/pages/publish/publish?again=' + encodeURIComponent(JSON.stringify(this.orderList[index]))
					});
				}
			},
			cancelOrder(orderId) {
				uni.navigateTo({
					url: '/pages/order/order_cancel?orderId=' + orderId
				});
			},
			getNotice() {
				let that = this;
				$get('niche/content/current?positionId=20', {}).then(res => {
					if (res.success && res.data != null) {
						that.notice_content = res.data.content;
					}
				});
			}
		}
	}
</script>

<style scoped  lang="scss">
page {
	color:#181818;
}
.top-menu-view {
	display: flex;
	white-space: nowrap;
	width: 100%;
	background-color: #FFFFFF;
	height: 86rpx;
	line-height: 86rpx;
	border-top: 1rpx solid #d8dbe6;
	
.menu-topic-view {
				display: inline-block;
				white-space: nowrap;
				height: 86rpx;
				position: relative;
	
	
				.menu-topic-text {
					font-size:28rpx;
					color: #303133;
					padding: 10rpx 46rpx;
				}
	
				.menu-topic-bottom {
					position: absolute;
					bottom: 0;
					width: 100%;
	
					.menu-topic-bottom-color {
						width: 40rpx;
						height: 4rpx;
					}
				}
	
				.menu-topic-act .menu-topic-bottom {
					display: flex;
					justify-content: center;
				}
	
				.menu-topic-act .menu-topic-bottom-color {
					background: #FF4D4F;
				}
				.menu-topic-act .menu-topic-text {
					font-size:28rpx;
					color: #FF4D4F;
					padding: 10rpx 46rpx;
				}
	
	
	
			}
}
.drag {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $uni-text-color-inverse;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    font-size: $uni-font-size-sm;
    position: fixed;
    z-index: 1000;
	left: 0;
	top:0;

    &.transition {
        transition: left 0.3s ease, top 0.3s ease;
    }
}
</style>
